﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="jsu.min.js"></script>
        
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <div class="slide offline-storage distant-slide" id="selector-slide1">
            <header><span class="js">JS</span> <h1>selectors</h1></header>    
            <pre class="prettyprint">
<span class="com">//get element by id</span>
    <b><span class="pln">jsu.selectorElement("#btnblue")</span></b>
<span class="com">//get element by classname</span>
    <b><span class="pln">jsu.selectorNodeList(".btnred")</span></b>
<span class="com">//get element by tagname</span>
    <b><span class="pln">jsu.selectorNodeList("button")</span></b>
<span class="com">//get element by all</span>
    <b><span class="pln">jsu.selectorNodeList("*")</span></b>
            </pre>
            <p id="localstorage-message">Example:</p>
            <div id="selector-btnExam">
                <button id="btnblue">
                    Selector Id "btnBlue"
                </button>
                <button class="btnred">
                    Selector ClassName "btnred"
                </button>
                <button id="selectTagname">
                    Selector TagName
                </button>
                <button onclick="funcSelectorAll();">
                    Selector All
                </button>
                <script>
                    
                    function funcSelectorTagName() {
                        var arr = jsu.selectorNodeList("#selector-btnExam > button").getText();
                        alert(arr.length);

                        for (var i in arr) {
                            alert(arr[i]);
                        }
                    }
                    function funcSelectorAll() {
                        var arr = jsu.selectorNodeList("#selector-btnExam > *").getText();
                        alert(arr.length);

                        for (var i in arr) {
                            alert(arr[i]);
                        }
                    }
                    
                </script>
                <script>
                    
                    
                    jsu.selectorElement("#selectTagname").onclick(function(){
                        funcSelectorTagName();
                    });
                    
                    
                    
                    jsu.selectorElement("#btnblue").onclick(function() {
                        alert(jsu.selectorElement("#btnblue").getText());
                    });//.getHTML());

                    jsu.selectorElement(".btnred").onclick(function() {
                        alert(jsu.selectorElement(".btnred").getText());
                    });//.getHTML());

                </script>

            </div>
        </div>


        <div class="slide offline-storage distant-slide" id="attributes-slide">
            <header><span class="js">JS</span> <h1>attributes</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//add/remove class</span>
    <b><span class="pln">jsu.selectorElement("#lbl").setClassName("abc")
    jsu.selectorElement("#lbl").removeClassName()
        </span></b>
<span class="com">//add/remove attribute</span>
    <b><span class="pln">jsu.selectorElement("#lbl").setAttribute("style", "border: 4px solid red")
    jsu.selectorElement("#lbl").removeAttribute("style")
        </span></b>
<span class="com">//get value/html của element</span>
    <b><span class="pln">jsu.selectorElement("#btn5").getText()
    jsu.selectorElement("#btn6").getHTML()</span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="btnExam">
                    <button id="btn1" onclick='jsu.selectorElement("#lbl").setClassName("abc")'>
                        Add class
                    </button>
                    <button id="btn2" onclick='jsu.selectorElement("#lbl").removeClassName()'>
                        Remove class
                    </button>
                    <button id="btn3" onclick='jsu.selectorElement("#lbl").setAttribute("style", "border: 4px solid red")'>
                        Add attribute
                    </button>
                    <button id="btn4" onclick='jsu.selectorElement("#lbl").removeAttribute("style")'>
                        Remove attribute
                    </button>
                    <button id="btn5" onclick='jsu.selectorElement("#lbl").setText(jsu.selectorElement("#btn5").getText())'>
                        get text
                    </button>
                    <button id="btn6" onclick='jsu.selectorElement("#lbl").setText(jsu.selectorElement("#btn6").getHTML())'>
                        <b>get html</b>
                    </button>
                    <hr /><br />
                    <label id="lbl">Label</label>
                    <script>

                    </script>
                </div>
                <p id="ta-log"></p>
            </section>
            <span class="counter"></span>
        </div>

        <div class="slide offline-storage distant-slide" id="ajax-slide">
            <header><span class="js">JS</span> <h1>ajax</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//ajax: get, getJSONP</span>
                        <b><span class="pln">
        jsu.ajax(
        {
            url: "feedback.html",
            type: "GET",
            success: function(html)
            {
                jsu.selectorElement("#demo4").setHTML(html);
            },
            error: function ()
            {
                alert("Error!!!!");
            }
        });
        </span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="btnExam">
                    <button id="btn1" onclick='funcAjax();'>
                        Load feedback.html
                    </button>
                    <hr /><br />
                    <div id="demo4"></div>
                    <script>
                        function funcAjax() {
                            jsu.ajax({
                                url: "feedback.html",
                                type: "GET",
                                success: function(html) {
                                    jsu.selectorElement("#demo4").setHTML(html);
                                },
                                error: function() {
                                    alert("Error!!!!");
                                }
                            });
                        }
                    </script>
                </div>
                <p id="ta-log"></p>
            </section>

            <span class="counter"></span>
        </div>

        <div class="slide offline-storage distant-slide" id="css-slide">
            <header><span class="js">JS</span> <h1>css</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//css:get width,height.</span>
                        <b><span class="pln">
        jsu.selectorElement("#demo5").css("width");
        </span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="demo5" style="width:600px; height: 50px; border:3px solid red;">Demo5</div>
                <div id="btnExam">
                    <button onclick='jsu.selectorElement("#demo6").setText("Width: " + jsu.selectorElement("#demo5").css("width"))'>
                        Get width
                    </button>
                    <button onclick='jsu.selectorElement("#demo6").setText("Height: " + jsu.selectorElement("#demo5").css("height"))'>
                        Get height
                    </button>
                    <button onclick='jsu.selectorElement("#demo6").setText("Border: " + jsu.selectorElement("#demo5").css("border"))'>
                        Get border
                    </button>
                    <hr /><br />
                    <div id="demo6">Label</div>

                </div>
                <p id="ta-log"></p>
            </section>

            <span class="counter"></span>
        </div>

        <div class="slide offline-storage distant-slide" id="events-slide">
            <header><span class="js">JS</span> <h1>events</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//Events: onload,click</span>
                        <b><span class="pln">
    jsu.selectorElement("#demo7").onclick(function () {
        alert("Click Button 1!!!");
    });
    jsu.selectorElement("#demo7").onload(function () {
        alert("Load button 1!!!");
    });
        </span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="btnExam">
                    <button id="demo7">
                        Button 1
                    </button>


                </div>
                <p id="ta-log"></p>
            </section>

            <span class="counter"></span>
        </div>


        <div class="slide offline-storage distant-slide" id="data-slide">
            <header><span class="js">JS</span> <h1>data</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//data: Localcache</span>
                        <b><span class="pln">
    //Set
        jsu.StorageBrowser.set("value", "abc")
    //Get
        jsu.StorageBrowser.get("value")
    //Remove
        jsu.StorageBrowser.removeKey("value")
        </span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="btnExam">
                    <textarea id="txt11" placeholder="enter text"></textarea><br />
                    <button id="demo8" onclick='jsu.StorageBrowser.set("value", document.getElementById("txt11").value)'>
                        Save
                    </button>
                    <button id="demo9" onclick='jsu.selectorElement("#result").setText(jsu.StorageBrowser.get("value"))'>
                        Get value
                    </button>
                    <button id="demo10" onclick='jsu.StorageBrowser.removeKey("value")'>
                        Remove
                    </button>
                    <hr /><br />
                    <div id="result"></div>
                </div>
                <p id="ta-log"></p>
            </section>

            <span class="counter"></span>
        </div>

        <div class="slide offline-storage distant-slide" id="plugin-slide">
            <header><span class="js">JS</span> <h1>plugin</h1></header>
            <section>
                <pre class="prettyprint"><span class="com">//plugin boxy popup</span>
                        <b><span class="pln">
    //Setup
        jsu.selectorElement("#abc").feedback(
        {
            width: 700,
            height: 300,
            left: 300,
            top: 10,
            title: "Are you ready?",
            button: "Gửi"
        });
        </span></b>
                </pre>
                <p id="localstorage-message">Example:</p>
                <div id="btnExam">
                    <button id="demo10" onclick='jsu.selectorElement("#result1").feedback({width: 700, height: 300, left: 100, top: 500, title: "Are you ready?", button: "Gửi"});'>
                        Plugin
                    </button>
                    <hr /><br />
                    <div id="result1"></div>
                </div>
                <p id="ta-log"></p>
            </section>

            <span class="counter"></span>

    </body>

</html>
